<template>
	<view class="u-page fullpage">
		<zx-nav title="商品评价" bg="#fff"></zx-nav>
		<view class="main">
			<view class="goodsinfo">
				<view class="flex">
					<view class="imgbox"><image :src="orderInfo.img_url[0] + '?imageView2/0/w/100'"></image></view>
					<view class="flex-sub">
						<view class="name flex justify-between">
							<text>{{ orderInfo.name }}</text>
						</view>
						<view class="num">{{ orderInfo.title }}</view>
					</view>
				</view>
				<view class="comment-con flex"><textarea class="flex-sub" placeholder="对我们的商品、服务，进行评价……" v-model="evaluationInfo.info"></textarea></view>
				<view class="uploadImg"><tui-upload :value="evaluationInfo.img_url" @complete="complete"></tui-upload></view>
				<view class="rate">
					<text class="ratename">商品评分</text>
					<tui-rate :current="index" :size="14" active="#fc743c" @change="rate"></tui-rate>
					<text class="num" :style="{ color: index == 0 ? '#c9c9c9' : '#fc743c' }">{{ index ? index + '.0' : '暂无评价' }}</text>
				</view>
			</view>
			<view class="btnBar"><u-button @click="submit" shape="circle" :disabled="btnDisabled" :loading="btnLoading" type="success" text="提交"></u-button></view>
		</view>
	</view>
</template>

<script>
import tuiUpload from '@/components/tui-upload/tui-upload.vue';
import tuiRate from '@/components/rate/rate';
export default {
	data() {
		return {
			tabIndex: 1,
			type: 0,
			index: 5,
			orderInfo: {},
			evaluationInfo: {
				info: '',
				img_url: ''
			},
			id: '',
			order_product_id: '',
			imgStatus: 1
		};
	},
	components: {
		tuiUpload,
		tuiRate
	},
	onLoad(option) {
		if (option.id) {
			this.id = option.id;
			this.order_product_id = option.order_product_id;
			this.getProductDetails();
		}
	},
	methods: {
		//评分
		rate(item) {
			this.index = item.index;
		},
		//图片选择完成
		complete(item) {
			this.imgStatus = item.status;
			this.evaluationInfo.img_url = item.imgArr;
		},
		submit() {
			let $me = this;
			for (var key in this.evaluationInfo) {
				console.log(key);
				console.log('key' + this.evaluationInfo[key]);
				if (key === 'info' && !this.evaluationInfo[key]) {
					uni.showToast({
						title: '请填写描述',
						icon: 'none'
					});
					return false;
				}
				if (this.index <= 0) {
					uni.showToast({
						title: '请选择商品评分',
						icon: 'none'
					});
					return false;
				}
				if (this.imgStatus != 1) {
					uni.showToast({
						title: this.imgStatus == 2 ? '请等待图片上传成功' : '请删除上传失败的图片'
					});
					return false;
				}
			}
			let param = {
				img_url: this.evaluationInfo.img_url,
				grade: this.index,
				info: this.evaluationInfo.info
			};
			$me.$postAction($me.$api.orderEvaluate + this.order_product_id, param).then(da => {
				if (da.code == 0) {
					uni.showToast({
						title: '评价成功',
						icon: 'success'
					});
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/order/evaluate/details?order_product_id=' + this.order_product_id
						});
					}, 200);
				} else {
					uni.showToast({
						title: da.msg,
						icon: 'none'
					});
				}
			});
		},
		getProductDetails() {
			this.$postAction(this.$api.getProductList, {
				id: this.id,
				page: 1,
				limit: 1
			}).then(da => {
				if (da.code == 0 && da.data.length > 0) {
					this.orderInfo = da.data[0];
				}
			});
		}
	}
};
</script>

<style lang="scss">
page {
	height: 100%;
	width: 100%;
	background: #fff;
	.goodsinfo {
		background: #fff;
		color: #000;
		border-top: 1px solid #ededed;
		padding: 67upx 0;

		.name {
			font-size: 30upx;
			font-weight: bold;
		}

		.imgbox {
			width: 123upx;
			height: 123upx;
			margin-right: 30upx;

			image {
				height: 100%;
				width: 100%;
				display: block;
				border-radius: 8upx;
			}
		}

		.num {
			color: #b3b6be;
			font-size: 20upx;
			padding: 10upx 0;
		}

		.shopinfo {
			font-size: 22upx;
			color: #666;

			.tag {
				color: #fff;
				// background: #e60012;
				// line-height: 25upx;
				// height: 25upx;
				width: 55upx;
				display: inline-block;
				padding: 0 10upx;
				border-radius: 5upx;
				font-size: 16upx;
				margin-right: 10upx;
			}

			.shopname {
				display: inline-block;
			}

			.favstate {
				color: #fb8442;
			}
		}

		.comment-con {
			margin-top: 50upx;

			textarea {
				padding: 40upx 30upx;
				border: 1px solid #cdcdcd;
				border-radius: 10upx;
				height: 200upx;
			}
		}
		.uploadImg {
			margin-top: 24upx;
		}
		.rate {
			margin: 50upx 0;
			.ratename {
				font-size: 28upx;
				margin-right: 30upx;
			}
			.num {
				font-size: 26upx;
				color: #c9c9c9;
				margin-left: 30upx;
			}
		}
	}

	.main {
		overflow: auto;
		margin-top: 20upx;
		.btnBar {
			margin: 0 30upx;
			.btn {
				width: 100%;
				font-size: 32upx;
				color: #fff;
				background-image: linear-gradient(90deg, #fb9549, #fc733b);
				height: 100upx;

				border-radius: 10upx;
				text-align: center;
				line-height: 100upx;
			}
		}
	}
}
</style>
